<template>
  <view class="scan-list-view">
    <view class="header">
      <text class="header-title">扫码数据列表</text>
    </view>

    <view class="list-content">
      <u-list @scrolltolower="scrollTolower" @scrollWithAnimation="true" :key="listKey">
        <u-list-item v-for="(item, index) in scanItems" :key="index" class="scan-item">
          <view class="item-card" @click="editScanItem(item)">
            <view class="item-header">
              <text class="item-code">{{ item.cInvCode }}</text>
            </view>

            <view class="item-details">
              <view class="detail-row">
                <text class="detail-label">公司名称:</text>
                <text class="detail-value">{{ item.vName }}</text>
              </view>

              <view class="detail-row">
                <text class="detail-label">采购订单:</text>
                <text class="detail-value">{{ item.cPOID }}</text>
              </view>

              <view class="detail-row">
                <text class="detail-label">物料名称:</text>
                <text class="detail-value">{{ item.cInvName }}</text>
              </view>

              <view class="detail-row">
                <text class="detail-label">单位:</text>
                <text class="detail-value">{{ item.cComUnitName }}</text>
              </view>

              <view class="detail-row">
                <text class="detail-label">可收货数量:</text>
                <text class="detail-value">{{ item.availableQty }}</text>
              </view>

              <view class="detail-row">
                <text class="detail-label">仓库:</text>
                <text class="detail-value">{{ item.whCode }}</text>
              </view>

              <view class="detail-row" v-if="item.isBatch===true">
                <text class="detail-label">批次:</text>
                <text class="detail-value">{{ item.cBatch }}</text>
              </view>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>

    <view class="fixed-bottom">
      <u-button @click="closeScanList" class="close-btn">关闭</u-button>
    </view>

    <!-- 扫码编辑弹窗 -->
    <scan-edit-dialog
      :show="showScanEditDialog"
      :item="currentScanItem"
      :arrivalList="arrivalList"
      @closeDialog="closeScanEditDialog"
      @saveDialog="saveScanEditDialog"
      @updateArrivalList="updateArrivalList"
    />

    <u-loading-icon :show="loading" text="加载中" textSize="18"></u-loading-icon>
  </view>
</template>

<script>
import ScanEditDialog from './ScanEditDialog.vue';

export default {
  name: "ScanList",
  components: {
    ScanEditDialog
  },
  props: {
    scanItems: {
      type: Array,
      default: () => []
    },
    arrivalList: {
      type: Array,
      default: () => []
    },
    listKey: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showScanEditDialog: false,
      currentScanItem: null
    }
  },
  methods: {
    editScanItem(item) {
      if (item.isBatch === false) {
        item.cBatch = null;
      }
      this.currentScanItem = item;
      this.showScanEditDialog = true;
    },

    closeScanList() {
      this.$emit('closeScanList');
    },

    scrollTolower() {
      this.$emit('scrollToLower');
    },

    closeScanEditDialog() {
      this.showScanEditDialog = false;
      this.currentScanItem = null;
    },

    saveScanEditDialog(item) {
      // 关闭对话框
      this.closeScanEditDialog();
      // 通知父组件移除已保存的扫描项
      this.$emit('removeScanItem', item);
    },

    updateArrivalList(updatedArrivalList) {
      // 将更新后的arrivalList传递给父组件
      this.$emit('updateArrivalList', updatedArrivalList);
    }
  }
};
</script>

<style scoped>
.scan-list-view .header {
  padding: 20rpx 0;
  text-align: center;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.scan-item {
  margin-bottom: 20rpx;
}

.scan-item .item-card {
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 24rpx;
  transition: all 0.3s;
}

.scan-item .item-card:hover {
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  transform: translateY(-4rpx);
}

.scan-item .item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.scan-item .item-code {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.detail-row {
  display: flex;
  margin-bottom: 12rpx;
}

.detail-label {
  width: 160rpx;
  font-size: 26rpx;
  color: #666;
}

.detail-value {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

/* 底部按钮样式 */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  text-align: center;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
}

.close-btn {
  flex: 1;
  border-radius: 50rpx;
  height: 80rpx;
  background-color: #f5f5f5;
  color: #333;
  margin-right: 10rpx;
}

.save-btn {
  flex: 1;
  border-radius: 50rpx;
  height: 80rpx;
  margin-left: 10rpx;
}
</style>
